<template>
	<div class="container">
		<div class="top-section">
			<div class="item" style="background-color: #ff7e5f;">
				<div class="item-content">关键合作伙伴</div>
				<ImportantCooperation></ImportantCooperation>
			</div>
			<div class="item vertical-container">
				<div class="vertical-item" style="background-color: #8dd8e7;">
					<div class="wenzi">
						关键活动
					</div>
					<KeyBusiness></KeyBusiness>
				</div>
				<div class="vertical-item" style="background-color: #86a8e7;margin-top: 5px;">
					<div class="wenzi">
						核心资源
					</div>
					<CoreResources></CoreResources>
				</div>
			</div>
			<div class="item" style="background-color: #f9d423;">
				<div class="item-content">价值主张</div>
				<ValueProposition></ValueProposition>
			</div>
			<div class="item vertical-container">
				<div class="vertical-item" style="background-color: #2ffa6a;">
					<div class="wenzi">
						客户关系
					</div>
					<CustomerRelationship></CustomerRelationship>
				</div>
				<div class="vertical-item" style="background-color: #ff6a6a;margin-top: 5px;">
					<div class="wenzi">
						渠道通路
					</div>
					<ChannelAccess></ChannelAccess>
				</div>
			</div>
			<div class="item" style="background-color: #2ecc71;">
				<div class="item-content">客户细分</div>
				<custmerVue />

			</div>
		</div>
		<div class="bottom-section">
			<div class="item" style="background-color: #ffe9ea;">
				<div class="item-content" style="color: darkblue;">成本结构</div>
				<costStructure></costStructure>
			</div>
			<div class="item" style="background-color: #ffafbd;">
				<div class="item-content">收入来源</div>
				<SourceOfIncome />
			</div>
		</div>
	</div>
</template>

<script setup>
	import custmerVue from './decompose/customer.vue'
	import ValueProposition from './decompose/ValueProposition.vue'
	import KeyBusiness from './decompose/KeyBusiness.vue'
	import ChannelAccess from './decompose/ChannelAccess.vue'
	import CoreResources from './decompose/CoreResources.vue'
	import costStructure from './decompose/costStructure.vue'
	import SourceOfIncome from './decompose/SourceOfIncome.vue'
	import CustomerRelationship from './decompose/CustomerRelationship.vue'
	import ImportantCooperation from './decompose/ImportantCooperation.vue'
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */
		height: 100vh;
		/* 全部高度 */
	}

	.top-section {
		display: flex;
		/* 上面区域的 div 自适应平铺 */
		flex: 1;
		/* 占据可用空间 */
	}

	.bottom-section {
		display: flex;
		/* 下面区域的 div 自适应平铺 */
		flex: 0.5;
		/* 占据较小空间 */
	}

	.item {
		position: relative;
		/* 设置位置为相对 */
		flex: 1;
		/* 自适应宽度 */
		margin: 10px;
		/* 间距 */
		color: white;
		/* 字体颜色 */
		padding: 20px;
		/* 内边距 */
		/* display: flex; */
		/* 使内容柔性排列 */
		align-items: flex-start;
		/* 使内容靠上对齐 */
		justify-content: flex-start;
		/* 使内容靠左对齐 */
		border-radius: 10px;
	}

	.item-content {
		font-family: '楷体';
		font-size: 24px;
		font-weight: bold;
		display: block;
		width: 100%;
		margin: 0px;
		/* 去掉默认边距 */
		padding: 0;
		/* 去掉默认内边距 */
	}



	.vertical-item {
		border-radius: 10px;
		/* 圆角 */
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
		height: 49%;
		width: 100%;
		padding: 0px;
		
		/* 去掉默认内边距 */
	}

	.vertical-container {
		display: flex;
		flex-direction: column;
		/* 垂直排列 */

		flex: 1;
		/* 自适应高度 */
		border: 0px solid red;
		padding: 0px;
		margin: 0;
		margin-top: 10px;
	}

	.wenzi {
		font-family: '楷体';
		font-size: 24px;
		font-weight: bold;
		margin-top: 20px;
		margin-left: 20px;
	}
</style>